<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术支持与维护中心</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --error-color: #e74c3c;
            --info-color: #34495e;
            --light-bg: #f8f9fa;
            --dark-bg: #343a40;
            --border-color: #dee2e6;
            --text-color: #212529;
            --text-light: #6c757d;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: var(--text-color);
            line-height: 1.6;
        }

        .support-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .support-header {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            text-align: center;
        }

        .support-header h2 {
            color: var(--primary-color);
            margin-bottom: 15px;
            font-size: 28px;
        }

        .support-header p {
            color: var(--text-light);
            font-size: 16px;
        }

        .support-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .support-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 25px;
            transition: transform 0.3s ease;
        }

        .support-card:hover {
            transform: translateY(-5px);
        }

        .support-card h3 {
            color: var(--primary-color);
            margin-bottom: 20px;
            font-size: 20px;
            display: flex;
            align-items: center;
        }

        .support-card h3 i {
            margin-right: 10px;
            font-size: 22px;
        }

        /* FAQ 样式 */
        .faq-list {
            margin-top: 15px;
        }

        .faq-item {
            margin-bottom: 15px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            overflow: hidden;
        }

        .faq-question {
            padding: 12px 15px;
            background-color: var(--light-bg);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
        }

        .faq-question:hover {
            background-color: #e9ecef;
        }

        .faq-answer {
            padding: 15px;
            background-color: white;
            display: none;
        }

        .faq-item.active .faq-answer {
            display: block;
        }

        /* 日志样式 */
        .log-list {
            max-height: 400px;
            overflow-y: auto;
            padding-right: 10px;
        }

        .log-item {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .log-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .log-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .log-time {
            color: var(--text-light);
        }

        .log-status {
            font-weight: 500;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .log-status.ok {
            background-color: rgba(46, 204, 113, 0.1);
            color: var(--success-color);
        }

        .log-status.warning {
            background-color: rgba(243, 156, 18, 0.1);
            color: var(--warning-color);
        }

        .log-status.error {
            background-color: rgba(231, 76, 60, 0.1);
            color: var(--error-color);
        }

        .log-message {
            font-size: 15px;
        }

        /* 联系表单样式 */
        .contact-info p {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        .contact-info i {
            margin-right: 10px;
            color: var(--primary-color);
            width: 20px;
            text-align: center;
        }

        .contact-form {
            margin-top: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .form-group textarea {
            min-height: 120px;
            resize: vertical;
        }

        .submit-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%;
        }

        .submit-btn:hover {
            background-color: var(--secondary-color);
        }

        /* 系统状态样式 */
        .system-status {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .status-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .status-card:hover {
            transform: translateY(-5px);
        }

        .status-card i {
            font-size: 36px;
            margin-bottom: 15px;
        }

        .status-card.ok i {
            color: var(--success-color);
        }

        .status-card.warning i {
            color: var(--warning-color);
        }

        .status-card.error i {
            color: var(--error-color);
        }

        .status-card h4 {
            margin-bottom: 10px;
            font-size: 18px;
        }

        .status-card p {
            margin-bottom: 5px;
            font-size: 14px;
            color: var(--text-light);
        }

        .status-card.ok {
            border-top: 4px solid var(--success-color);
        }

        .status-card.warning {
            border-top: 4px solid var(--warning-color);
        }

        .status-card.error {
            border-top: 4px solid var(--error-color);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .support-grid {
                grid-template-columns: 1fr;
            }

            .system-status {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 480px) {
            .system-status {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="support-container" id="support-content">
        <div class="support-header">
            <h2><i class="fas fa-tools"></i> 技术支持与维护中心</h2>
            <p>在这里您可以找到常见问题解答、联系技术支持团队、查看系统日志以及监控系统状态。我们的团队随时准备为您提供帮助。</p>
        </div>

        <div class="support-grid">
            <div class="support-card">
                <h3><i class="fas fa-question-circle"></i> 常见问题解答</h3>
                <div class="faq-list">
                    <div class="faq-item">
                        <div class="faq-question">
                            如何添加新设备到系统?
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            进入"设备"数据库，输入设备数据，系统将自动创建并展示设备。
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            设备离线如何处理?
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            首先检查设备的电源和网络连接，然后尝试在"实时监控"页面重新连接设备。如果问题持续，请联系技术支持。
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            如何设置自动化规则?
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            在"设备控制"菜单下选择"设置阈值"，您可以创建基于传感器数据的自动化响应规则。
                        </div>
                    </div>
                    <div class="faq-item">
                        <div class="faq-question">
                            数据历史保存多久?
                            <i class="fas fa-chevron-down"></i>
                        </div>
                        <div class="faq-answer">
                            系统默认保存90天的详细数据，之后会进行归档处理。您可以在"数据分析"页面导出历史数据。
                        </div>
                    </div>
                </div>
            </div>

            <div class="support-card">
                <h3><i class="fas fa-history"></i> 最近系统日志</h3>
                <div class="log-list">
                    <div class="log-item">
                        <div class="log-header">
                            <span class="log-time">2023-06-21 14:23:18</span>
                            <span class="log-status ok">正常</span>
                        </div>
                        <div class="log-message">温度传感器更新阈值：上限28°C → 26°C</div>
                    </div>
                    <div class="log-item">
                        <div class="log-header">
                            <span class="log-time">2023-06-21 13:45:02</span>
                            <span class="log-status warning">警告</span>
                        </div>
                        <div class="log-message">会议室湿度超过阈值(65%)，当前值：68%</div>
                    </div>
                    <div class="log-item">
                        <div class="log-header">
                            <span class="log-time">2023-06-21 10:12:37</span>
                            <span class="log-status ok">正常</span>
                        </div>
                        <div class="log-message">系统备份完成，耗时12分34秒</div>
                    </div>
                    <div class="log-item">
                        <div class="log-header">
                            <span class="log-time">2023-06-20 22:30:15</span>
                            <span class="log-status">信息</span>
                        </div>
                        <div class="log-message">固件自动更新：网关设备 v2.3.5 → v2.4.1</div>
                    </div>
                    <div class="log-item">
                        <div class="log-header">
                            <span class="log-time">2023-06-20 18:45:29</span>
                            <span class="log-status error">错误</span>
                        </div>
                        <div class="log-message">设备1连接超时，自动重连中...</div>
                    </div>
                </div>
            </div>

            <div class="support-card">
                <h3><i class="fas fa-headset"></i> 联系技术支持</h3>
                <div class="contact-info">
                    <p><i class="fas fa-phone-alt"></i> 支持热线: ******</p>
                    <p><i class="fas fa-envelope"></i> 邮箱: ******</p>
                    <p><i class="fas fa-clock"></i> 工作时间: 周一至周五 8:30-17:30</p>
                    <p><i class="fas fa-comments"></i> 在线客服: 右下角聊天图标</p>
                </div>

                <div class="contact-form">
                    <div class="form-group">
                        <label for="issue-type">问题类型</label>
                        <select id="issue-type">
                            <option value="">请选择问题类型</option>
                            <option value="connection">设备连接问题</option>
                            <option value="data">数据异常</option>
                            <option value="control">控制失效</option>
                            <option value="other">其他问题</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="description">问题描述</label>
                        <textarea id="description" placeholder="请详细描述您遇到的问题..."></textarea>
                    </div>
                    <button class="submit-btn">提交支持请求</button>
                </div>
            </div>
        </div>

        <h3 style="margin: 30px 0 20px; color: #3498db;"><i class="fas fa-heartbeat"></i> 系统状态监控</h3>
        <div class="system-status">
            <div class="status-card ok">
                <i class="fas fa-server"></i>
                <h4>API 服务</h4>
                <p>运行正常</p>
                <p>响应时间: 42ms</p>
            </div>
            <div class="status-card ok">
                <i class="fas fa-database"></i>
                <h4>数据库</h4>
                <p>运行正常</p>
                <p>存储使用: 65%</p>
            </div>
            <div class="status-card warning">
                <i class="fas fa-network-wired"></i>
                <h4>设备连接</h4>
                <p>2个设备离线</p>
                <p>在线率: 96%</p>
            </div>
            <div class="status-card ok">
                <i class="fas fa-cloud"></i>
                <h4>云服务</h4>
                <p>运行正常</p>
                <p>延迟: 28ms</p>
            </div>
        </div>
    </div>

    <script>
        // FAQ 展开/收起功能
        document.querySelectorAll('.faq-question').forEach(question => {
            question.addEventListener('click', () => {
                const item = question.parentElement;
                item.classList.toggle('active');

                // 切换图标
                const icon = question.querySelector('i');
                if (item.classList.contains('active')) {
                    icon.classList.remove('fa-chevron-down');
                    icon.classList.add('fa-chevron-up');
                } else {
                    icon.classList.remove('fa-chevron-up');
                    icon.classList.add('fa-chevron-down');
                }
            });
        });

        // 提交表单功能
        document.querySelector('.submit-btn').addEventListener('click', () => {
            const issueType = document.getElementById('issue-type').value;
            const description = document.getElementById('description').value;

            if (!issueType) {
                alert('请选择问题类型');
                return;
            }

            if (!description.trim()) {
                alert('请输入问题描述');
                return;
            }

            // 这里应该是实际提交表单的代码
            alert('支持请求已提交，我们的团队将尽快与您联系！');
            document.getElementById('description').value = '';
        });
    </script>
</body>
</html>
